<template>
  <a-modal
    :visible="visible"
    title="编辑施工内容"
    cancelText="取消"
    okText="提交"
    @ok="submit"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :label-col="labelCol"
      :wrapperCol="wrapperCol"
      :rules="formRules"
      :model="formState"
    >
      <a-form-item label="内容" name="nr">
        <a-textarea v-model:value="formState.nr" />
      </a-form-item>
      <a-form-item label="地址" name="dz">
        <a-input v-model:value="formState.dz" />
      </a-form-item>
      <a-form-item label="责任单位" name="zrdw">
        <a-input v-model:value="formState.zrdw" />
      </a-form-item>
      <a-form-item label="状态" name="zt">
        <a-switch
          checked-children="完成"
          un-checked-children="未完成"
          :checked="formState.zt === '0'"
          @click="onSwitchClick"
        />
      </a-form-item>
      <a-form-item label="计划完成时间" name="jhwcTime">
        <a-date-picker
          style="width: 100%"
          v-model:value="formState.jhwcTime"
          @change="onDataChange"
        />
      </a-form-item>
      <a-form-item label="备注" name="bz">
        <a-input v-model:value="formState.bz"></a-input>
      </a-form-item>
      <a-form-item label="照片">
        <a-upload
          :remove="handleRemove"
          :before-upload="beforeUpload"
          :fileList="fileList"
        >
          <a-button>
            <upload-outlined></upload-outlined>
            上传
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, watch } from "vue";
import { updateById } from "@/api/module/constructionPreparation";
import { message } from "ant-design-vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },
  emit: ["close"],
  setup(props, context) {
    const fileList = ref([]);

    // 点击切换状态
    const onSwitchClick = () => {
      console.log("点击状态");
      if (formState.zt === "1") {
        formState.zt = "0";
      } else {
        formState.zt = "1";
      }
      console.log(formState.zt);
    };

    // 上传的时候移除文件
    const handleRemove = (file) => {
      const index = fileList.value.indexOf(file);
      const newFileList = fileList.value.slice();
      newFileList.splice(index, 1);
      fileList.value = newFileList;
    };

    const beforeUpload = (file) => {
      // 判断文件类型
      const imageType = ["image/jpeg", "image/png", "image/gif", "image/bmp"];
      const isType = imageType.includes(file.type);
      if (!isType) {
        return message.error("上传文件格式错误!");
      }
      fileList.value = [file];
      // 限制只能上传一个文件
      return false;
    };

    // 监听
    watch(
      () => props.record,
      (newV, oldV) => {
        Object.assign(formState, newV);
      },
      {
        deep: true, // 深度监听
      }
    );

    // 选择计划日期
    const onDataChange = (data, dataString) => {
      formState.jhwcTime = dataString;
      console.log(formState.jhwcTime);
    };
    // 表单实例
    const formRef = ref();
    // 表单数据
    const formState = reactive({
      sort: 0,
      enable: "true",
      nr: "",
      dz: "",
      zrdw: "",
      zt: "",
      jhwcTime: "",
      bz: "",
    });

    // 表单校验规则
    const formRules = {
      nr: [{ required: true, message: "请输入", trigger: "blur" }],
      dz: [{ required: true, message: "请输入", trigger: "blur" }],
      zrdw: [{ required: true, message: "请输入", trigger: "blur" }],
      zt: [{ required: true, message: "请选择", trigger: "blur" }],
      jhwcTime: [{ required: true, message: "请选择", trigger: "blur" }],
      bz: [{ required: true, message: "请输入", trigger: "blur" }],
    };

    // 点击提交
    const submit = async (e) => {
      const res = await formRef.value.validate();
      const formData = new FormData();
      fileList.value.forEach((item) => {
        formData.append("zp", item);
      });
      formData.append("bz", formState.bz);
      formData.append("dz", formState.dz);
      formData.append("id", formState.id);
      formData.append("jhwcTime", formState.jhwcTime);
      formData.append("nr", formState.nr);
      formData.append("wcTime", formState.wcTime);
      formData.append("zrdw", formState.zrdw);
      formData.append("zt", formState.zt);
      // 调用更新接口
      await updateById(formData);
      fileList.value = [];
      context.emit("close", false);
    };

    const cancel = (e) => {
      fileList.value = [];
      context.emit("close", false);
    };

    // token
    const tokenKey = localStorage.getItem("token_key");
    const token = localStorage.getItem("token");

    return {
      submit,
      cancel,
      formRef,
      formState,
      formRules,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      onDataChange,
      fileList,
      handleRemove,
      beforeUpload,
      onSwitchClick,
    };
  },
});
</script>
